<template>
	<view class="order-page">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<uni-icons class="back-icon" type="left" size="36rpx" color="#00CC71" @click="navigateBack" />
			<text class="title">我的预约订单</text>
		</view>

		<!-- 标签切换栏 -->
		<view class="tab-bar">
			<view v-for="(tab, idx) in tabs" :key="idx" class="tab-item" :class="{ active: idx === activeTab }"
				@click="activeTab = idx">
				<text>{{ tab }}</text>
				<view class="underline" v-show="idx === activeTab"></view>
			</view>
		</view>

		<!-- 订单列表 -->
		<view class="order-list">
			<view class="order-item" v-for="(item, idx) in orderList" :key="idx">
				<view class="info-col">
					<text class="time">预约时间：{{ item.time }}</text>
					<text class="doctor">预约医生：{{ item.doctor }}</text>
					<text class="address">医院地址：{{ item.address }}</text>
				</view>
				<view class="number-col">
					<text class="label">预约号：</text>
					<text class="value">{{ item.number }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'

	// 标签定义
	const tabs = ref(['全部', '待预约', '已完成'])
	const activeTab = ref(0) // 默认选中“全部”

	// 订单数据结构
	interface OrderItem {
		time : string
		doctor : string
		address : string
		number : string
	}

	// 模拟订单数据
	const orderList = ref<OrderItem[]>([
		{ time: '2022-10-20 11:30', doctor: 'xxxxx', address: 'xxxxxxxxxxx', number: '20' },
		{ time: '2022-10-20 11:30', doctor: 'xxxxx', address: 'xxxxxxxxxxx', number: '11' },
		{ time: '2022-10-20 11:30', doctor: 'xxxxx', address: 'xxxxxxxxxxx', number: '9' },
		{ time: '2022-10-20 11:30', doctor: 'xxxxx', address: 'xxxxxxxxxxx', number: '6' },
		{ time: '2022-10-20 11:30', doctor: 'xxxxx', address: 'xxxxxxxxxxx', number: '3' },
	])

	// 返回上一页
	const navigateBack = () => {
		uni.switchTab({
			url:'/pages/index/index'
		})
	}
</script>

<style scoped lang="scss">
	.order-page {
		background-color: #F5F5F5;
		min-height: 100vh;

		// 导航栏样式
		.navbar {
			display: flex;
			align-items: center;
			height: 88rpx;
			background: #FFFFFF;
			padding: 0 24rpx;
			position: relative;
			margin-top: 90rpx;

			// 底部绿色装饰线
			&::after {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 4rpx;
				background-color: #00CC71;
			}

			.back-icon {
				margin-right: 16rpx;
			}

			.title {
				font-size: 36rpx;
				color: #00CC71;
				font-weight: 700;
			}
		}

		// 标签栏样式
		.tab-bar {
			display: flex;
			justify-content: space-around;
			background: #FFFFFF;
			padding: 20rpx 0;
			margin-top: 10rpx;

			.tab-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				text {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 8rpx;
				}

				.underline {
					width: 50rpx;
					height: 6rpx;
					background-color: #00CC71;
					border-radius: 3rpx;
				}

				&.active {
					text {
						color: #00CC71;
					}
				}
			}
		}

		// 订单列表样式
		.order-list {
			padding: 20rpx;

			.order-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-shadow: 0 0 20rpx rgba(0, 204, 113, 0.2); // 绿色渐变发光
				padding: 24rpx;
				margin-bottom: 20rpx;

				.info-col {

					.time,
					.doctor,
					.address {
						font-size: 24rpx;
						color: #666;
						margin-bottom: 6rpx;
						display: block;
					}
				}

				.number-col {
					display: flex;
					align-items: baseline;

					.label {
						font-size: 26rpx;
						color: #999;
						margin-right: 8rpx;
					}

					.value {
						font-size: 36rpx;
						color: #00CC71;
						font-weight: 700;
					}
				}
			}
		}
	}
</style>